<template>
	<view class="content">
		<view class="header" :style="{'height': headerHeight +'rpx'}">
			<view class="tabList-box">
				<view class="tabList">
					<view class="li" :class="tabActive == index ? 'tabActive':''" v-for="(item,index) in tabList"
						@click="tabChange(index)">{{ item.text }}</view>
				</view>
				<view class="screen" v-if="tabActive == 2">
					<uni-datetime-picker class="dataRrange" v-model="dataRrange" type="daterange" @change="getList(1)" />
					<!-- <view class="copyLink">复制下载链接</view> -->
				</view>
				
				
			</view>
			
		</view>
		<view class="jizhang" style="" :style="{'padding-top': headerHeight +'rpx'}" v-if="tabActive == 0">
			<view>记账：</view>
			<textarea placeholder="请输入记账内容" v-model="FormData.text"></textarea>
		</view>
		<view class="fujian" :style="{'padding-top': headerHeight +'rpx'}" v-if="tabActive == 1">
			<view>附件记账：</view>
			<view class="imgList">
				<uni-file-picker limit="6" title="" @select="select1"
					@delete="deleteFile1"></uni-file-picker>
			</view>
		</view>
		<scroll-view :style="{'height': height +'px'}" class="scroll-view" scroll-y="true"
			@scrolltolower="onReachBottom">
        <view class="lists" :style="{'padding-top': headerHeight +'rpx'}" v-if="tabActive == 2">
        	<view class="li" v-for="(item,index) in lists">
				<div v-if="item.ctypes == 0">
					<view>记账内容 ：{{ item.text }}</view>
					<view class="time">{{ item.create_time }}</view>
				</div>
				<div v-if="item.ctypes == 1">
					<view>附件记账：</view>
					<view class="imgList">
						<image @click="previewImage(item,imgItem)" v-for="imgItem in item.text" :src="imgItem"></image>
					</view>
					<view class="time">{{ item.create_time }}</view>
				</div>
			
			</view>
		    <view class="empty" v-if="lists.length == 0">暂无记录~</view>
        </view>
		</scroll-view>
		<button class="save-btn" @click="saveFormData" v-if="tabActive !=2">保存</button>
	   <!-- <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" @maskClick="closeScreen">
	    	<view class="screen-box">
	    		<view class="title">跟进类别 <image class="close" @click="closeScreen" src="../../static/18.png"></image></view>
	    		<input type="text" placeholder="请输入类别名称"/>
	    		<view class="swichBox">
					<view class="li" v-for="(item,index) in swich" :class="swichActive == index ? 'tabActive':''" @click="swichChange(index)">{{item.name }}</view>
				</view>
				<view class="btn">
	    			保存
	    		</view>
	    	</view>
	    </uni-popup> -->
	</view>
</template>

<script>
	import {
		list_jizhang,
		add_jizhang,
		put_jizhang
	} from "@/utils/api.js";
	export default {
		data() {
			return {
				headerHeight:100,
				title: 'Hello',
				tabList: [{
						text: '新增记账'
					},
					{
						text: '附件记账'
					},
					{
						text: '历史记账'
					}
				],
				tabActive: 0,
				swich: [{
						name: '正常',
						value: 0
					},
					{
						name: '禁用',
						value: 1
					}
				],
				swichActive: 0,
				tops:0,
				height:0,
				dataRrange:[],
				FormData:{
					jizhang_id:'',
					ctypes:0,
					text:''
				},
				// 数据列表
				lists: [],
				// 分页参数
				page: 1,
				pageSize: 10,
				count: '',
			}
		},
		onLoad(options) {
			console.log(options)
			
			uni.getSystemInfo({

				success: (e) => {

				  this.tops = e.statusBarHeight;
				  this.height = e.screenHeight - 100
				  let custom = uni.getMenuButtonBoundingClientRect();
				  
				 /*#ifdef MP-WEIXIN*/
                  // this.height = 140 + custom.height + (custom.top - e.statusBarHeight) * 2;
                  /*#endif*/
				  console.log('========',this.height)
				}

			  })

		},
		methods: {
			 previewImage(item,imageUrl) {
			      uni.previewImage({
			        current: imageUrl, // 当前显示的图片链接
			        urls:item.text // 需要预览的图片链接列表
			      });
			    },
			// 添加客户
			async saveFormData(type){
				let that = this
				
				if(!that.FormData.text){
					uni.showToast({
						title: "请输入记账内容",
						icon:'none'
					})
					return
				}
				
				let data={
					text: that.tabActive == 1 ? JSON.stringify(that.FormData.text) : that.FormData.text,
					ctypes: that.FormData.ctypes,
					user:uni.getStorageSync('userInfo').user_id
				}
				
				let res = await add_jizhang(data);
			      console.log('记账添加===',res)
				  if(res.code == 0){
					  uni.showToast({
					  	title:'添加成功',
					  	duration: 2000,
					  	icon:'none'
					  })
					  
			            
				  }
			},
			goBack(){
				uni.navigateBack()
			},
			showPop(){
				 this.$refs.popup.open('center')
				 this.screenPop = true
			},
			closeScreen(){
				this.$refs.popup.close()
				console.log('关闭')
				 this.screenPop = false
			},
			confirmScreen(){
				this.$refs.popup.close()
			},
			addSeniorData(){
				uni.navigateTo({
					url:"/pages/addSeniorData/index"
				})
			},
			tabChange(index) {
				this.tabActive = index
				if(index == 2){
					this.headerHeight = 200
					this.page = 1
					this.getList(1)
				}else{
					this.headerHeight = 100
				}
				if(index == 0){
					this.FormData.ctypes = 0
					this.FormData.text = ''
				}
				if(index == 1){
					this.FormData.ctypes = 1
					this.FormData.text = []
				}
				console.log('==========',this.tabActive)
			},
			swichChange(index){
				this.swichActive = index
			},
			history(){
				uni.navigateTo({
					url:'/pages/customerHistory/index'
				})
			},
			// 附件 文件上传(选择)
			select1(e){
				let that = this

				let files = e.tempFilePaths
				for(var i = 0;i < files.length;i++){ 
					uni.uploadFile({
					   url: 'https://www.renhexinxi.cn/front_end/api/upload_image/', // 替换为你的上传API地址
					   filePath: files[i], // 附件路径
					   name: 'image',
					   formData: {}, // 可加入表单内其他参数
					   success: (res) => { //成功回调
						const result = JSON.parse(res.data) // 成功回调返回结果
						 console.log('成功回调返回结果',result,666, that.FormData)
						 that.FormData.text.push(result.url)
					   },
					   fail: (error) => { //失败回调
						console.log(error)
					   }		
					})
				}
			},
			// 附件 文件上传(删除) 
			deleteFile1(e){
				console.log('文件上传(删除)',e)
				this.FormData.text.splice(e.index,1)
			},
			
			onPullDownRefresh() {
				// 处理下拉刷新的逻辑
				console.log('下拉刷新');
				this.page = 1
				this.getList(1)
			},
			
			onReachBottom() {
				// 处理下拉加载更多的逻辑
				console.log('下拉加载更多');
				this.page++;
				// 模拟加载更多数据
				this.getList();
			},
			
			// 列表
			async getList(type) {
				let that = this
				let dataRrange = ''
				if (that.dataRrange.length > 0) {
					dataRrange = that.dataRrange[0] + ',' + that.dataRrange[1]
				}
			
				let data = {
					page: that.page,
					size: 20,
					date_range: dataRrange,
					user_id: uni.getStorageSync('userInfo').user_id
				}
				let res = await list_jizhang(data);
			    
				if (res.code == 0) {
					that.count = res.count
			        res.results.forEach(function(item) {
						if(item.ctypes == 1){
							item.text = JSON.parse(item.text)
						}
					});
					if (type == 1) {
						that.lists = res.results
					} else {
						that.lists = that.lists.concat(res.results)
						
					}
			console.log('客户列表===', that.lists)
					// 停止下拉刷新动画
					uni.stopPullDownRefresh();
				}
			
			},

		}
	}
</script>

<style scoped>
	.content{
		font-size: 26rpx;
	}
	.jizhang{
		display: flex;
		width: 90%;
		margin: auto;
	}
	.jizhang view{
		width: 100rpx;
		margin-top: 20rpx;
	}
	.jizhang textarea{
		width: 80%;
		border: 1rpx solid #f5f5f5;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-left: 26rpx;
		font-size: 26rpx;
	}
	.fujian{
		width: 90%;
		margin: auto;
	}
	.imgList{
		margin-top: 20rpx;
		display: flex;
	}
	.imgList image{
		width: 100rpx;
		height: 100rpx;
		margin-left: 10rpx;
	}
	/deep/ .icon-add{
		width: 50rpx !important;
	}
	/deep/ .is-add{
		width: 200rpx;
		height: 200rpx;
	}
	 .dataRrange{
		 width: 100% !important;
		 float: left;
	}
	 /deep/.uni-date{
		 width: 100% !important;
		 margin-top: 20rpx;
		 float: left;
		 line-height: initial !important;
	}
	.header .screen{
		width: 100%;
		font-size: 26rpx;
	}
	.header .screen .copyLink{
		width: 26%;
		float: right;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #008BDE;
		color: white;
		border-radius: 5rpx;
		margin-top: 22rpx;
		font-size: 26rpx;
	}
	.screen-box{
		width: 520rpx;
		height: 400rpx;
		background-color: white;
		border-radius: 10rpx;
		font-size: 26rpx;
	}
	.screen-box .title{
		width: 90%;
		margin: auto;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	    color: #008BDE;
		text-align: center;
	}
	.screen-box .title .close{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
		top: 15rpx;
	}
	.screen-box input{
		width: 75%;
		display: block;
		border: 1rpx solid #ccc;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		margin: auto;
		padding-left: 20rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.swichBox{
	   width: 78.3%;
		height: 60rpx;
		margin: auto;
		line-height: 60rpx;
		border: 1rpx solid #008BDE;
		display: flex;
		margin-top: 20rpx;
	}
	
	.swichBox .li {
		width: 50%;
		text-align: center;
		font-size: 26rpx;
	}
	
	.swichActive {
		background-color: #008BDE;
		color: white !important;
	}
	.header{
		width: 100%;
		height: 80rpx;
		line-height: 90rpx;
		position: absolute;
		top: 0;
		z-index: 10;
		text-align: center;
		background-color: white;
	}
	
	.header .back{
		width: 20rpx;
		height: 40rpx;
	    margin-left: 30rpx;
		margin-top: 30rpx;
		float: left;
	}
	.header .name{
		height: 100%;
		line-height: 90rpx;
		margin-top:7rpx;
		background-color: white;
	}
	.header .history{
		width: 150rpx;
		height: 55rpx;
		line-height: 55rpx;
		background: #008BDE;
		border-radius: 5rpx;
		position: absolute;
		font-size: 26rpx;
		right: 40rpx;
		top: 26rpx;
		color: #fff;
	}
	.tabList-box{
		width: 90%;
		background-color: white;
		height: 100%;
		background-color: white;
		/* position: fixed;
		top: 100rpx;
		left: 0;
		right: 0; */
		margin: auto;
		z-index: 100;
	
	}
	.tabList {
		width: 100%;
		height: 70rpx;
		margin: auto;
		line-height: 70rpx;
		border: 1rpx solid #008BDE;
		display: flex;
	}

	.tabList .li {
		width: 50%;
		text-align: center;
		color: #008BDE;
		font-size: 26rpx;
	}
	.tabList .li:nth-of-type(2){
		border-right: 1px solid #008BDE;
		border-left: 1px solid #008BDE;
	}
	.tabActive {
		background-color: #008BDE;
		color: white !important;
	}
    .lists{
    	width: 90%;
    	margin: auto;
		padding-top: 100rpx;
    }
    .lists .li{
    	line-height: 60rpx;
    	margin-top: 20rpx;
    	border-bottom: 1rpx solid #f5f5f5;
    	padding-bottom: 20rpx;
    	font-size: 26rpx;
    	position: relative;
    }
    .lists .li .time{
		color: #999;
	}
	
	.imgList{
		margin-top: 20rpx;
	}

	.btn{
		width: 80%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 80rpx;
		color: white;
		text-align: center;
		margin: auto;
		background-color: #008BDE;
		margin-top: 50rpx;
		font-size: 26rpx;
	}
    .save-btn{
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		color: white;
		position: absolute;
		right: 0;
		left: 0;
		bottom: 20%;
		margin: auto;
		margin: auto;
		background-color: #008BDE;
		font-size: 26rpx;
	}
	.empty{
		width: 100%;
		height: 30px;
		text-align: center;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
	}

</style>